<template>
  <div class="article-manager-box">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-collection"></i> 文章管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="article-manager-content-box">
      <div class="toolbar-box">
        <el-button class="mr-10" type="primary" icon="el-icon-delete" @click="handleBatchDelete()" :disabled="multipleSelection.length === 0">批量删除</el-button>
        <el-input
            class="mr-10"
            placeholder="标题"
            v-model="inputTitle"
            style="width: 300px;margin-left: 30px;"
            clearable>
        </el-input>
        <el-button class="mr-10" type="primary" icon="el-icon-search" @click="handleSearch()">搜索</el-button>
      </div>
      <div class="content-table-box">
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
            border>
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              label="标题"
              width="200">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>
<!--          <el-table-column-->
<!--              prop="author"-->
<!--              label="作者"-->
<!--              width="120">-->
<!--          </el-table-column>-->
          <el-table-column
              prop="publish_time"
              label="发布时间"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="modify_time"
              label="最新修改时间"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              label="分类"
              :filters="classifyList"
              :filter-method="filterClassify">
            <template slot-scope="scope">
              <el-tag
                  v-for="(classify, index) in scope.row.classifies"
                  class="mr-10"
                  :type="classify === 'Python' ? 'primary' : 'success'"
                  disable-transitions
                  :key="index">{{classify}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              label="标签"
              :filters="tagList"
              :filter-method="filterTag">
            <template slot-scope="scope">
              <el-tag
                  v-for="(tag, index) in scope.row.tags"
                  class="mr-10"
                  :type="tag === 'Python' ? 'primary' : 'success'"
                  disable-transitions
                  :key="index">{{tag}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
        <!--      分页器      -->
      <div class="pagination-box">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalArticle"
            background>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {deleteArticle, listSelfArticle} from "@/api/apis";

export default {
  name: "ArticleManager",
  data(){
    return{
      inputTitle: '',
      tableData: [],
      totalArticle: 0,
      next: '',
      previous: '',
      currentPage: 1,
      pageSize: 20,
      multipleSelection: [],
      classifyList: [],
      tagList: [],
    }
  },
  created(){
    const page = this.$route.query.page
    const size = this.$route.query.size
    if (page){
      this.currentPage = parseInt(page)
    }
    if(size){
      this.pageSize = parseInt(size)
    }
    this.getListArticle()
  },
  methods:{
    getListArticle(title=null){
      let params = new URLSearchParams()
      params.append('page', this.currentPage)
      params.append('size', this.pageSize)
      if(title){
        console.log(this.inputTitle)
        params.append('title_snippet', this.inputTitle)
      }
      listSelfArticle(params).then(response =>{
        this.tableData = response.results.data
        this.totalArticle = response.count
        this.handleFilterList(response.results.data)
        // this.classifyList = response.results.classify
        // this.tagList = response.results.tag_list
      }).catch(err => {
        this.$message.error(err.data.message)
      })
    },
    handleFilterList(data){
      let classifyList = []
      let tagList = []
      data.forEach(item => {
        // 列表拼接 es6语法    或 a.push.apply(a,b);
        classifyList.push(...item.classifies)
        tagList.push(...item.tags)
      })
      // 去重
      classifyList = Array.from(new Set(classifyList))
      tagList = Array.from(new Set(tagList))
      classifyList.forEach(item => {
        this.classifyList.push({
          'text': item,
          'value': item,
        })
      })
      tagList.forEach(item => {
        this.tagList.push({
          'text': item,
          'value': item,
        })
      })
    },
    filterClassify(value, row){
      return row.classifies.some(item => item === value)
    },
    filterTag(value, row){
      return row.tags.some(item => item === value)
    },
    handleCurrentChange(page){
      this.currentPage = page
      this.$router.push({
        name: 'article-manager',
        query: {
          page: this.currentPage,
          size: this.pageSize,
        }
      })
      this.getListArticle()
    },
    handleSizeChange(size){
      this.pageSize = size
      if (size > this.totalArticle){
        this.currentPage = 1
      }
      this.$router.push({
        name: 'article-manager',
        query: {
          page: this.currentPage,
          size: this.pageSize,
        }
      })
      this.getListArticle()
    },
    // 多选框回调函数
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row){
      this.$router.push({
        // 传递params时 必须使用name
        name: 'editor-modify',
        params: {
          id: row.id
        }
      })
    },
    handleDelete(index, row){
      this.handleBatchDelete(row.id)
    },
    handleBatchDelete(id=null){
      let ids = []
      if (id){
        ids = id
      }else{
        this.multipleSelection.forEach(item => {
          ids.push(item.id)
        })
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteArticle({'ids': ids}).then(response => {
          this.$message({
            type: 'success',
            message: response.message
          });
          this.getListArticle()
        }).catch(err => {
          console.log(err)
          this.$message({
            type: 'error',
            message: err.data.message
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSearch(){
      console.log('click')
      if(this.inputTitle !== ''){
        // console.log(this.inputTitle)
        this.getListArticle(true)
      }else{
        this.getListArticle()
      }
    }
  }
}
</script>

<style scoped>
  .article-manager-box{
  }
  .article-manager-content-box{
    margin-top: 10px;
    background-color: white;
    padding: 10px;
    border-radius: 5px;
  }
  .mr-10{
    margin-right: 10px;
  }
  /* 解决表头布局错位的bug */
  /deep/ .el-table th.gutter{
    display: table-cell!important;
  }
  .content-table-box{
    margin-top: 10px;
  }
  .pagination-box{
    margin-top: 20px;
    text-align: right;
  }
</style>
